// http://ionicframework.com/docs/theming/
$text-grey: rgb(200, 200, 200);
$toolbar-background: rgb(244, 57, 100);
$toolbar-text-color: rgb(255, 255, 255);
$toolbar-ios-background: red;
/**
导航条设置
 */
ion-navbar {
  .toolbar-background {
    background: $toolbar-background;
    opacity: .8;

  }
  .toolbar-title {
    color: $toolbar-text-color;
  }

}

.back-button {
  color: $toolbar-text-color !important;
}

.bar-button {
  color: $toolbar-text-color !important;
  .text {
    color: $toolbar-text-color !important;
  }
  .icon {
    color: $toolbar-text-color !important;
  }
}

.btn-header-right {
  font-size: 2.3rem;
}

.divider-line {
  width: 100%;
  div {
    border-bottom: 1px solid #ddd;
  }
}

ion-content {
  background-color: rgb(249, 249, 249) !important;
}

.showItem {
  display: flex;
}

.hideItem {
  display: none;
}

page-mer-buy-agent-goods-list, market-home, food-home, page-ticket-home, page-busifood-tableorder {
  ion-footer {
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: white;
    height: 54px;
    font-size: 1.7rem;
    .footer-shopping {
      position: absolute;
      bottom: 4.5rem;
      width: 100%;
      background-color: #f9f9f9;
      color: white;
      flex-direction: column;
      .footer-shopping-content {
        width: 100%;
        min-height: 25rem;
        .content-divider {
          width: 100%;
          background: white;
          height: 3.5rem;
          margin-bottom: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 3px 0 3px 8px;
          color: black;
          font-weight: 300;
          font-size: 1.5rem;
          .divider-left {
            width: 50%
          }
          .divider-center {
            width: 20%;
            color: #f53d3d;
          }
          .divider-right {
            padding: 0 8px 0 2px;
            width: 8rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            ion-icon {
              font-size: 2.3rem;
              color: #00c6ff;
            }
            button {
              background: white;
              font-weight: 300;
            }
          }
        }
      }

      .footer-shopping-header {
        display: flex;
        padding: 3px 8px 3px 8px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 2.5rem;
        font-size: 1.8rem;
        color: black;
        button {
          background-color: inherit;
          font-size: 1.8rem;
          font-weight: 300;
        }
        i {
          margin-right: 5px;
          color: red;
        }
      }
    }
    .footer-left {
      background-color: black;
      color: white;
      opacity: .8;
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: .5rem;
      .footer-left-notification {
        position: absolute;
        border: 1px solid hotpink;
        border-radius: 4rem;
      }
      i {
        font-size: 2rem;
        color: white;
      }
      button {
        background-color: inherit;
      }
    }
    .footer-right {
      background-color: #488aff;
      padding: 0;
      color: white;
      width: 30%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.7rem;
      opacity: .9;

    }
  }
}

.shade {
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0.7;
  position: absolute;
  z-index: -1;
  animation: .3s;
  top: 0;
}

.showBack {
  z-index: 1000 !important;
}

.hideBack {
  z-index: -1;
}

/**
加号按钮
 */

//.toolbar-background{
//  background-color: #099fde!important;
//  opacity: 0.85;
//
//}
//.toolbar-title{
//  color: white!important;
//}
//.back-button{
//  color: white!important;
//}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
$font-size-big: 3vh;

// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

//一些对ion-item、ion-label的微调
.ion-width-33-ctrl {
  max-width: 33%;
  min-width: 33%;
}

.ion-width-67-ctrl {
  max-width: 67%;
  min-width: 67%;
  input {
    text-align: right;
  }
  .select-icon-inner {
    left: 0 !important;
  }
}

.ion-width-50-ctrl {
  max-width: 50%;
  min-width: 50%;
  .select-icon-inner {
    left: 0 !important;
  }
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

page-busifood-tableset, page-busifood-tableshow, page-upload-file {
  .button-top {
    display: flex;
    margin-right: 1rem;
    div {
      position: absolute;
      left: 16px;
      bottom: 18px;
      font-size: 10px;
      color: hotpink;
      padding: 1px;
      text-align: center;
      vertical-align: middle;
    }
  }
  ion-content {
    background-color: white !important;
  }
  .container {
    display: flex;
    flex-direction: column;
  }
  .floor {
    height: 2.5rem;
    border-left: .4rem solid paleturquoise;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5b68;
    font-weight: 300;
    font-size: 1.7rem;
    span {
      flex: 1;
      text-align: center;
      padding-left: 10px;
    }
    button {
      display: flex;
      background-color: inherit;
      font-size: 18px;
    }
  }

  .card-container {
    display: flex;
    //align-items: center;
    //justify-content: space-between;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 1rem 0 1rem 0;
    .my-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin: 3px;
      width: 100px;
      height: 110px;
      background-color: #41b883;
      color: white;
      padding: 0 !important;
      border-radius: 4px;
      font-size: 1.5rem;

      .my-card-header {
        display: flex;
        align-items: center;
        width: 100px;
        height: 2rem;
        justify-content: center;
        border-top-left-radius: .4rem;
        font-size: 1.38rem;
        border-top-right-radius: .4rem;
        border-bottom: 1px solid white;

        i {
          font-size: 15px;
          margin-right: 5px;
        }
      }
      .my-card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        .cus {
          display: flex;
          align-items: center;
        }
      }
    }

    .my-card-footer {
      font-size: 12px;
      margin-bottom: .3rem;
    }
    .my-card-add {
      background: white;
      color: darkcyan;
      border: 2px dashed;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      ion-icon {
        font-size: 9rem;
      }
    }
  }
}

//二维码容器
.QR-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0;
  img {
    width: 85vw;
    height: 85vw;
  }
}
